import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
import http from '@/utils/http'
///同步加载组件
const router = createRouter({
    //路由配置
    history: createWebHashHistory(),
    routes: [
        {
            name: "Index",
            path: "/",
            redirect: '/manage',//重定向
            meta: {//路由元信息. 可以在定义路由的时候 往路由里面传值.
                title: "首页"
            },
            children: [//路由嵌套
                {
                    // name:"Manage",
                    props: true, //当有动态路由传值 或 params传值 会自动把params数据 放入组件的props
                    path: "manage",//path: "/manage",
                    meta: {
                        title: "后台管理"
                    },
                    component: () => import("@view/Manage.vue"),//这个匹配的组件会渲染到router-view
                    children: [//嵌套子路由,嵌套的子路由的路由出口在上级路由组件里面需要写一个router-view出口
                        {
                            path: "", //当进入 #/manage 路由的时候 子路由默认渲染Home组件
                            name: "Manage",
                            component: () => import("@view/Home.vue")
                        },
                        {
                            //  :page(正则用来限定:page的)*后面这个正则用来限定前面整个:page
                            //类似 (:page(\\d*))*
                            path: "question/:page(\\d*)*", //动态路由 动态路由可以写正则
                            meta: {
                                title: "面试题列表"
                            },
                            component: () => import("@view/questions/List.vue"),
                            beforeEnter(to, from, next) {
                                console.log("独享路由守卫 beforeEnter  ===>");
                                next();
                            }
                        },
                        {
                            path: "question_add",
                            meta: {
                                title: "添加面试"
                            },
                            component: () => import("@view/questions/Add.vue")
                        },
                        {
                            path: "answer",
                            component: () => import("@view/answer/List.vue")
                        },
                        {
                            path: "answer_add",
                            component: () => import("@view/answer/Add.vue")
                        },
                        {
                            path: "category",
                            component: () => import("@view/category/List.vue")
                        },
                        {
                            path: "category_add",
                            component: () => import("@view/category/Add.vue")
                        },
                        {
                            path: "user",
                            component: () => import("@view/user/List.vue")
                        },
                        {
                            path: "user_add", component: () => import("@view/user/Add.vue")
                        }
                    ]
                },
            ]
        },
        {
            name: "Login",//具名路由 可以根据名称跳转
            path: '/login',
            //用()=>import("@view/Login.vue")异步懒加载路由组件.
            //路由懒加载的组件 会打包工具打包成一个独立js文件。在需要显示的时候会异步加载组件js.提高首次运行速度.
            component: () => import("@view/Login.vue") //vue路由里面路由组件懒加载
        },
        {
            path: "/:nomatch(.*)*",
            component: () => import("@view/404.vue")
        }
    ],
    // linkActiveClass:"",
    // linkExactActiveClass:""
});
router.beforeEach(async (to, from, next) => {
    //登录验证判断应该放到这里.
    // console.log("全局路由守卫函数 beforeEach()===>");
    // next();
    let token = localStorage.getItem("Authorization");
    //校验下 token
    let result = await http.get("/user/verify", {
        Headers: {
            "Authorization": token
        }
    });
    if (result.data.data.status == 400) {
        next("/login");
    }
    else {
        if (to.path == "/login") {//判断如果是登录 那么路由确认放行
            if (token && token.length >= 10) {
                next("/manage")
            } else {
                next();
            }
        } else {
            if (!token || token.length < 10) {
                next("/login");
            } else {
                next();
            }
        }
    }
});
router.beforeResolve((to, from, next) => {
    console.log("全局路由守卫函数==beforeResolve=>");
    next();
});
router.afterEach((to, from) => {//上一次路由离开
    console.log("全局路由守卫afterEach");
})

//公开router对象 router需要作为插件安装到Vue的根对象
export default router;